<!-- 模块说明 -->
<template>
  <div class="top">
    <span><b>领劵中心</b>&ensp;<i>></i></span>
    <div class="nav">
      <span>首页</span>
      <span>犬</span>
      <span>猫</span>
      <span>鸟</span>
      <span>水族</span>
      <span>小宠</span>
      <span>花卉</span>
      <span>
        <van-icon name="qr" />分类
      </span>
    </div>
    <div class="input"></div>
  </div>
  <video
    src="https://vd3.bdstatic.com/mda-nfr21itayx9bpmc5/sc/cae_h264/1656208150540490277/mda-nfr21itayx9bpmc5.mp4?v_from_s=hkapp-haokan-hbe&auth_key=1669793205-0-0-bf80c8884c030b4dc6e75af08b999424&bcevod_channel=searchbox_feed&pd=1&cd=0&pt=3&logid=3405617124&vid=15828190339751448901&abtest=&klogid=3405617124"
    class="shipin"></video>
  <div class="yongjin">
    <p><img
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi.vzan.cc%2Fimage%2Fpng%2F2017%2F4%2F11%2F113715a715ed38f2ee47a896676ecf8bd82a6e.png&refer=http%3A%2F%2Fi.vzan.cc&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672281702&t=ae163f110fb62bcde130149d7a94bf5d"><span>分销赚佣金</span>
    </p>
    <p><img
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi.vzan.cc%2Fimage%2Fpng%2F2017%2F4%2F11%2F113715a715ed38f2ee47a896676ecf8bd82a6e.png&refer=http%3A%2F%2Fi.vzan.cc&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672281702&t=ae163f110fb62bcde130149d7a94bf5d"><span>养宠顾问</span>
    </p>
    <p><img
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi.vzan.cc%2Fimage%2Fpng%2F2017%2F4%2F11%2F113715a715ed38f2ee47a896676ecf8bd82a6e.png&refer=http%3A%2F%2Fi.vzan.cc&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672281702&t=ae163f110fb62bcde130149d7a94bf5d"><span>福利中心</span>
    </p>
    <p><img
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi.vzan.cc%2Fimage%2Fpng%2F2017%2F4%2F11%2F113715a715ed38f2ee47a896676ecf8bd82a6e.png&refer=http%3A%2F%2Fi.vzan.cc&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672281702&t=ae163f110fb62bcde130149d7a94bf5d"><span>同城店铺</span>
    </p>
    <p><img
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi.vzan.cc%2Fimage%2Fpng%2F2017%2F4%2F11%2F113715a715ed38f2ee47a896676ecf8bd82a6e.png&refer=http%3A%2F%2Fi.vzan.cc&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672281702&t=ae163f110fb62bcde130149d7a94bf5d"><span>我的店铺</span>
    </p>
  </div>
  <div class="gonggao">
    <van-notice-bar left-icon="volume-o 公告"
      text="————温馨提示：首页【广场发布】页面里的售卖信息内容为用户自行发布！平台对该类信息的真实性不作任何承诺且不承担任何责任！切勿随意转定金及汇款给对方以防上当受骗！ 平台卖家免费入驻开店！所有用户搜索关注微信公众号《同城宠物APP》实时掌握平台福利动态！" />
  </div>
  <ul class="list">
    <li>
      <img src="https://img1.baidu.com/it/u=436925601,435630142&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
      <div>导弹鬼M-2 1.36kg全价冻干</div>
      <span><i>￥ 78</i><s>￥ 128.00</s></span>
    </li>
    <li>
      <img src="https://img1.baidu.com/it/u=436925601,435630142&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
      <div>导弹鬼M-2 1.36kg全价冻干</div>
      <span><i>￥ 78</i><s>￥ 128.00</s></span>
    </li>
    <li>
      <img src="https://img1.baidu.com/it/u=436925601,435630142&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
      <div>导弹鬼M-2 1.36kg全价冻干</div>
      <span><i>￥ 78</i><s>￥ 128.00</s></span>
    </li>
    <li>
      <img src="https://img1.baidu.com/it/u=436925601,435630142&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
      <div>导弹鬼M-2 1.36kg全价冻干</div>
      <span><i>￥ 78</i><s>￥ 128.00</s></span>
    </li>
    <li>
      <img src="https://img1.baidu.com/it/u=436925601,435630142&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
      <div>导弹鬼M-2 1.36kg全价冻干</div>
      <span><i>￥ 78</i><s>￥ 128.00</s></span>
    </li>
    <li>
      <img src="https://img1.baidu.com/it/u=436925601,435630142&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
      <div>导弹鬼M-2 1.36kg全价冻干</div>
      <span><i>￥ 78</i><s>￥ 128.00</s></span>
    </li>
  </ul>
  <div class="fujin">
    <p>
      <b>附近店铺</b>
      <span>更多 ></span>
    </p>
    <div class="dianpu">
      <img src="https://img2.baidu.com/it/u=2163742644,4154187060&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=370">
      <div>
        <h3>猫咪宝贝</h3>
        <span><b>营业时间：全天</b>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<i>300分钟&emsp;&emsp;3.58km</i></span>
      </div>
    </div>
  </div>
</template>

<script setup>
</script>
<style lang="scss" scoped>
.body {
  overflow: auto;
  background: #e1e1e1;
}

.top {
  height: 120px;
  width: 100%;
  background: rgb(231, 77, 103);
  overflow: hidden;
  position: relative;

  span {
    display: flex;
    justify-content: end;
    margin-top: 10px;
    color: #fff;
  }

  i {
    font-style: normal;
    color: #333;
    line-height: 24px;
  }

  .nav {
    display: flex;
    justify-content: space-around;
    color: #fff;
    font-size: 16px;

    .van-icon {
      width: 20px;
      height: 20px;
      margin-top: 4px;
    }
  }

  .nav>span:nth-of-type(1) {
    font-weight: bold;
  }

  .input {
    width: 96%;
    height: 30px;
    background: #fff;
    margin: 0 auto;
    border-radius: 25px;
    margin-top: 20px;
  }

}

.shipin {
  width: 100%;
  height: 500px;
}

.yongjin {
  width: 100%;
  height: 90px;
  background: #e1e1e1;
  display: flex;
  justify-content: space-around;
  align-items: center;

  p {
    width: 70px;
    height: 60px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    img {
      width: 40px;
      height: 40px;
    }

    span {

      font-size: 12px;

      color: #333;
    }
  }
}

.van-notice-bar {
  color: #fff;
  background: rgb(227, 65, 92);
}

.list {
  width: 100%;
  height: auto;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;

  li {
    width: 125px;
    height: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;


    img {
      width: 125px;
      height: 125px;
    }

    div {
      width: 115px;
      color: #333;
      font-size: 14px;
    }

    span {
      width: 80%;
      display: flex;
      justify-content: space-between;
    }

    i {
      color: rgb(165, 39, 39);
      font-size: 14px;
      font-style: normal;
    }

    s {
      color: #333;
      text-decoration: line-through;
      font-size: 12px;
    }
  }
}

.fujin {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  p {
    width: 94%;
    display: flex;
    justify-content: space-between;
    margin: 7px auto;

    span {
      font-size: 12px;
      color: #333;
    }
  }

  .dianpu {
    width: 96%;
    height: 100px;
    border-radius: 10px;
    margin: 0 auto;
    background: #fff;
    display: flex;
    align-items: center;

    img {
      width: 50px;
      height: 50px;
      margin: 20px;
    }

    h3 {
      margin-top: -26px;
      margin-bottom: 14px;
    }

    span {
      display: flex;
      justify-content: space-around;
    }

    b {
      font-weight: 100;
      font-size: 12px;
    }

    i {
      font-style: normal;
      font-size: 12px;
    }
  }
}
</style>